<template>
  <div class="list-container business">
     <div class='topbar clearfix'>
          <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item :to="{path:'/businessManag/businessManag'}">分销管理</el-breadcrumb-item>
              <el-breadcrumb-item>分销员管理</el-breadcrumb-item>
            </el-breadcrumb>
            <div class="fr topRight">
                <span>共{{total}}个人</span>
                <span class="addProject" @click='addBusiness'>导入分销员</span>
                <div class="seach clearfloat">
                  <el-input v-model="seachName" @keyup.native.enter="seachClick" style="float:left;width:60%" placeholder="请输入手机号或用户昵称进行搜索"></el-input>
                  <div class="seachBtn" @click="seachClick">搜索</div>
                </div>
            </div>
       </div>
       <div class="header">
            <div class="list clearfloat">
              <span class="fl">分销员状态：</span>
              <el-checkbox-group v-model="checkListM" class="fl">
                <el-checkbox @change='optionChange()'  :label="item.code" v-for='(item,index) in selectTypeM' :key="index">{{item.desc}}</el-checkbox>
              </el-checkbox-group>
            </div>
       </div>
       <div class="nav">
           <div class="tableHeader clearfloat">
               <div class="tableLi tableHeaderImg">手机号</div>
               <div class="tableLi tableHeaderDetail">分销员名称<i class="el-icon-warning" title="请分销员在小程序内把用户昵称修改为真实姓名"></i></div>
               <div class="tableLi tableHeaderProject"> 导入时间</div>
               <div class="tableLi tableHeaderOrder">导入操作人</div>
               <div class="tableLi tableHeaderStatus">状态</div>
               <div class="tableLi tableHeaderOperat">操作</div>
           </div>
           <ul class="navList clearfloat">
             
              <li v-if='!navList.length' class='nodata'>暂无数据</li>
               <li v-for="(item,index) in navList" :key="index" v-else>
                   <div class="table clearfloat">
                        <!-- 手机号 -->
                        <div class="tableDiv HeaderImg clearfix" ref="HeaderImg">13811111382</div>
                        <!-- 分销员名称 -->
                        <div class="tableDiv HeaderDetail" ref="HeaderDetail">
                            <div class="topList clearfloat">郝佳琪 </div>
                        </div>
                        <!--  导入时间 -->
                        <div class="tableDiv HeaderProject" ref="HeaderProject">{{getTimeDate(item.createdTime,'yyyy-MM-dd hh:mm:ss')}}</div>
                        <!--  导入操作人 -->
                        <div class="tableDiv HeaderOrder" ref="HeaderOrder">{{item.creatorPhoneShow}}</div>
                        <!-- 状态   -->
                        <div class="tableDiv HeaderStatus" ref="HeaderStatus">启用中</div>
                        <!-- 操作   -->
                        <div class="tableDiv HeaderOperat" ref="HeaderOperat" @click="setSalesStatus(1)">停用</div>
                   </div>
               </li>
           </ul>
           <div class="pagination" v-if="total>dataParm.pageSize">
              <el-pagination
                  background
                  :current-page.sync='dataParm.pageNo'
                  @current-change="handleCurrentChange"
                  :page-size="dataParm.pageSize"
                  :pager-count="11"
                  layout="prev, pager, next"
                  :total="total">
              </el-pagination>
            </div>
       </div>
       <el-dialog
        class="addBusiness"
        :title=diaTitle
        :visible.sync="dialogError"
        width="680px"
        >
        <div class='content'>
            <h3>原因如下：</h3>
            <ul>
              <el-scrollbar style="height:100%">
                <li>第X行导入失败，手机号格式不对；</li>
                <li>第X行导入失败，手机号还未注册，请先到小程序中完成注册；</li>
                <li>第X行导入失败，手机号已存在；</li>
                <li>第X行导入失败，手机号格式不对；</li>
                <li>第X行导入失败，手机号还未注册，请先到小程序中完成注册；</li>
                <li>第X行导入失败，手机号已存在；</li>
                <li>第X行导入失败，手机号格式不对；</li>
                <li>第X行导入失败，手机号还未注册，请先到小程序中完成注册；</li>
                <li>第X行导入失败，手机号已存在；</li>
                <li>第X行导入失败，手机号格式不对；</li>
                <li>第X行导入失败，手机号还未注册，请先到小程序中完成注册；</li>
                <li>第X行导入失败，手机号已存在；</li>
              </el-scrollbar>
            </ul>
        </div>
       </el-dialog>
       <el-dialog
        class="importFile"
        title='请选择'
        :visible.sync="dialogVisible"
        width="500px"
        :before-close="handleClose">
        <div class='content clearfix'>
            <div class="chooseFile fl">
                <img src="https://cdn.yueyangshuyuan.com/wenjian.png" alt="">
                <span>选择文件</span>
            </div>
            <div class="downFile fl">
                <img src="https://cdn.yueyangshuyuan.com/moban.png" alt="">
                <span>下载模版</span>
            </div>
        </div>
       </el-dialog>
  </div>
</template>

<script>
import api from "@/fetch/url";
import {FormatDate,transformPrice} from '@/utils/index.js'
export default {
  data() {
    return {
        dataParm:{
            keyword:'',
            pageNo:1,
            pageSize:10
        },
        seachName:"",
        navList:[],
        total:0,
        dialogVisible:false,
        dialogError:false,
        checkListM:[],
        selectTypeM:[
          {
            code:0,
            desc:'不限'
          },{
            code:1,
            desc:'启用中'
          },{
            code:2,
            desc:'停用中'
          }
        ],
        diaTitle:'已成功导入110条数据，失败222条数据',

    }
  },
  created() {
    this.getCustomerList();
  },
  computed:{
      getTimeDate(){//获取时间戳
        return (time,format)=>{
          if(time){
            return FormatDate(new Date(Number(time)),format)
          }
        }
      },
  },
  mounted() {
    
  },
  methods: {
    addBusiness(){
        this.dialogVisible = true;
    },
     getCustomerList(){
       api.listPerchant({...this.dataParm}).then(json=>{
          this.navList = json.list;
          this.total = json.total;
       });
     },
    setSalesStatus(type){

    },
    handleClose(){
        
    },
    toastMsg(msg,type){
      this.$message({
        message: msg,
        type: type
      });
    },
    //点击搜索
    seachClick(){
       this.dataParm.pageNo = 1;
       this.dataParm.keyWord = this.seachName;
       this.getCustomerList();
    },
     //点击分页触发列表接口
     handleCurrentChange(val) {
       this.dataParm.pageNo = val;
       this.getCustomerList();
     }
  }
}
</script>
<style lang='scss'>
.el-pagination.is-background .btn-next, .el-pagination.is-background .btn-prev, .el-pagination.is-background .el-pager li {
  background-color: #fff;
}
.el-dialog{
    border-radius: 4px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0 !important;
}
.projectNameSelect .el-select-dropdown__item {
   overflow:hidden;
	white-space:nowrap;
	text-overflow:ellipsis;
}
  .projectNameSelect  .el-select-dropdown__item.selected{
    color: #FC612A;
  }
  .business  .topbar .topRight .seach .el-input{
      width:270px!important;
  }
  .business .topbar .topRight .seach .el-input .el-input__inner{
    width:270px;
  }
  .el-select .el-input.is-focus .el-input__inner{
      border: 1px solid #DDDDDD;
  }
  .el-select .el-input__inner:focus{
      border: 1px solid #DDDDDD;
  }
  .el-select-dropdown__item.selected{
      color: #FC612A;
  }
    .addBusiness{
        .el-dialog__header{
            border-bottom: 1px solid #E9E9E9;
        }
        .el-dialog__body{
          padding: 0;
        }
        .content{
            font-size: 14px;
            h3{
              background: #F2F2F2;
              height: 36px;
              line-height: 36px;
              font-size: 14px;
              color: #777777;
              margin-bottom: 18px;
              padding-left: 20px;
            }
            ul{
              height: 320px;
              padding: 0 50px;
              padding-bottom: 20px;
              overflow: hidden;
              .el-scrollbar__wrap{
                  overflow-x: hidden;
              }
              li{
                font-size: 14px;
                color: #2A2A2A;
                line-height: 16px;
                margin-bottom: 18px;
              }
            }
        }
        .secDialog{
            .li{
                margin-top: 14px;
            }
            .label{
                width: 106px;
                color: #262626;
                display: inline-block;
            }
            span{
                color: #262626;
            }
            p{
                color: #FC612A;
                font-size: 14px;
                font-weight: bold;
                margin-top: 37px;
                text-align: center;
            }
        }
        .el-dialog__footer{
            text-align: center;
            .dialog-footer{
                display: flex;
                justify-content: center;
                flex-flow: row-reverse;
                .el-button+.el-button{
                    margin: 0;
                }
                .el-button--default{
                    margin-left: 10px;
                    background: #C3C3C3;
                    color: #FFFFFF;
                    &:active{
                       border-color: #C3C3C3
                    }
                    &:hover{
                       border-color: #C3C3C3
                    }
                    &:focus{
                       border-color: #C3C3C3
                    }
                }
                .el-button--primary:active,.el-button--primary:hover,.el-button--primary:focus{
                    background:#FC612A;
                }
               
                .el-button:focus, .el-button:hover{
                    color: #FFFFFF;
                }
            }
        }
    }
    .importFile{
      .el-dialog__header{
        padding-top: 26px;
        .el-dialog__title{
          position: relative;
          left: 200px;
          font-weight: bold;
        }
      }
      .el-dialog__body{
        padding:0;
      }
      .content{
        height: 226px;
        padding-top: 60px;
        .chooseFile,.downFile{
          width: 168px;
          height: 110px;
          border-radius: 4px;
          font-size: 16px;
          color: #FFFFFF;
          font-weight: bold;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          span{
            margin-top: 14px;
          }
        }
        .chooseFile{
          margin-left: 66px;
          background: #FC612A;
          img{
            width: 36px;
            height: 36px;
          }
        }
        .downFile{
          background: #3E79FF;
          margin-left: 24px;
          img{
            width: 40px;
            height: 36px;
          }
        }
      }
    }
    .header{
    .list{
        .el-checkbox{
            margin-right: 18px;
          }
          .el-checkbox__inner{
            width: 18px;
            height: 18px;
          }
          .el-checkbox__inner::after{
            border: 2px solid #FFF;
            border-left: 0;
            border-top: 0;
            height: 9px;
            left: 5px;
            top: 1px;
            width: 4px;
          }
          .el-checkbox__label{
            padding-left: 6px;
          }
          .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner{
            background: #FC612A;
            border: 1px solid #FC612A;
          }
          .el-checkbox__input.is-focus .el-checkbox__inner{
            border-color :#FC612A;
          }
          .el-checkbox__inner:hover{
            border-color :#FC612A;
          }
          .el-checkbox__input.is-checked+.el-checkbox__label{
            color: #262626;
          }
    }
  }
</style>
<style lang="scss" scoped>
  .header{
      .el-checkbox-group{
        margin-top: 4px;
      }
  }
  .nav {
    .top {
      padding:20px 0 0px 0;
      box-sizing: border-box;
      .addProject {
        float: left;
        width: 150px;
        height: 40px;
        color: #fff;
        text-align: center; 
        background: #1890ff;
        cursor: pointer;
        border-radius: 4px;
        line-height: 40px;
      }
      span {
        float: left;
        margin-left:30px;
        line-height: 40px;
      }
    }
    .navList {
      padding:0;
      margin:0;
      min-width:1180px;  
      overflow-x:auto; 
      li {
         border-bottom: 1px solid  #EEEEEE;
         float: left;
         width:100%;
         background: #fff;
         cursor: pointer;
         margin-top: 0;
         padding-left:12px;
        .table {
            padding: 12px 8px;
            box-sizing: border-box;
            display: flex;
            flex-direction: row;
            .tableDiv {
              float: left;
              padding-right:20px;
              font-size: 14px;
              color: #777777;
              height: 40px;
              box-sizing: border-box;
              .miueList {
                height: 20px;
                text-align: center;
                line-height: 20px;
                font-size: 14px;
                color: #fff;
              };
              .upIng{
                color: #FC612A
              }
              .closeStatus{
                color: #8C8C8D
              }
              .BeopenedStatus{
                color: #26A9FF;
              }
            }
            .HeaderImg {
              margin-left:0px;
              line-height: 40px;
              font-size: 16px;
              color: #262626;
              font-weight:bold;
            }
            .HeaderDetail {
              .topList {
                display: flex;
                align-items: center;
                justify-content: center;
                height: 40px;
                color: #777777;
              }
            }
            .HeaderProject{
                display: flex;
                align-items: center;
                justify-content: center;
                height: 40px;
                color: #777777;
            }
            .HeaderOrder{
                text-align: center;
                line-height:40px;
                color: #777777;
            }
            .HeaderStatus{
              height: 40px;
              line-height:40px;
              text-align: center;
              color: #777777;
            }
            .HeaderOperat{
               color: #3E79FF;
               height: 40px;
               line-height:40px;
            }
        }
      }
      .nodata{
        width: 100%;
        height:200px;
        line-height: 200px;
        text-align:center;
      }
    }
    .pagination {
      margin-top:30px;
      text-align: center;
    }
    .tableHeader {
      padding:0 8px;
      padding-left:20px;
      box-sizing: border-box;
      margin:10px 0 0 0;
      border-bottom: 1px solid #E9E9E9;
      display: flex;
      flex-direction: row;
      .tableLi {
        float: left;
        padding-right:20px;
        font-size: 12px;
        color: #777777;
        height: 32px;
        line-height: 32px;
        text-align: center;
        box-sizing: border-box;
      }
      .tableHeaderImg{
        text-align: left;
      }
    }
    .tableHeaderImg ,.HeaderImg{
        min-width: 250px;
        width:25%;
    }
    .tableHeaderDetail ,.HeaderDetail{
        width:10%;
        min-width:150px;
        i{
          margin-left: 4px;
        }
    }
    .tableHeaderProject ,.HeaderProject{
        width:25%;
        min-width:250px;
        
    }
    .tableHeaderOrder ,.HeaderOrder{
        width:10%;
        min-width:200px;
    }
    .tableHeaderStatus,.HeaderStatus {
        width:10%;
        min-width:150px;
    }
    .tableHeaderOperat,.HeaderOperat {
        width:10%;
        min-width:150px;
        text-align: center;
    }
  }
</style>